<template>
  <!-- 区块链存证 -->
  <div>
    <div style=" width: 6.875rem;margin: 0 auto">
      <div style="text-align: center">
        <h2>区块链存证</h2>
        <div class="spanLine"></div>
      </div>
      <div style="display: flex" class="Item">
        <div  v-for="(item, index) in blockList" :key="index" class="itemList border"  v-animate="'queue-bottom'">
          <div class="blockImg">
            <img :src="item.src" alt=" ">
          </div>
          <div>
            <div>
              <h3>{{ item.title }}</h3>
              <div class="divLine"></div>
            </div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="border lastItem"  v-animate="'queue-bottom'">
        <h1>区块链技术优势</h1>
        <div style="text-align: left;text-indent: 2em;">
          速裁通作为以区块链技术为基础的线上综合司法服务平台,联合CA认证机构、司法鉴定中心、公证处、仲裁委等权威机构发起区块链基础服务联盟，建设面向电子数据存证的联盟区块链。电子合同签署生效后，
        由速裁通把电子合同签署过程形成的证据链保存至区块链，通过司法鉴定、仲裁、公证等机构进行多方存证。通过区块链底层将电子合同签约全过程证据完整记录，将司法机构纳入区块链体系同步鉴证，形成完整证据链。从而解决电子数据易遭篡改的问题,保证电子数据的真实性,实现“电子数据向电子证据”的转变,提高电子证据的采信率,从而提升审判效率。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Block',
  data() {
    return {
      blockList: [
        {
          src: require('@/assets/images/serverall/suyuan.png'),
          title: '可溯源',
          text: '通过录入组织的签名证明数据最初来源，能追溯数据在链中历史记录不可窜改。'
        },
        {
          src: require('@/assets/images/serverall/zhongxinhua.png'),
          title: '去中心化',
          text: '分布式核算和存储，不存在中心化的硬件或管理机构，系统中的数据块由整个系统中具有维护功能的节点来共同维护。'
        },
        {
          src: require('@/assets/images/serverall/cuangai.png'),
          title: '防篡改机制',
          text: '一旦信息经过验证并添加至区块链，就会永久的存储起来，区块中的数据是不可逆的，数据有极高的稳定性和可靠性'
        },
        {
          src: require('@/assets/images/serverall/anquan.png'),
          title: '安全系数高',
          text: '使用信息传输使用ECDSA签名，相比传统的证书签名:验证速度快，强度高，安全性系数高。'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  h2{
    font-size: 34px;
  }
.Item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
.itemList:nth-of-type(1){
  padding-bottom: 85px;

}

.itemList {

  margin-top: 96px;
  width: 620px;
  height: 100%;
  padding: 60px 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  letter-spacing: 3px;

  .text {
    width: 236px;
    font-size: 18px;
  }

  .divLine {
    margin: -0.06rem 0 0.06rem 0 !important;
    width: 26px;
    height: 2px;
    background: #1DD2AF;
  }
}



.border {
  border:1px solid rgba(6, 0, 1, 0.2000);
  border-radius: 30px;
  transition: all .7s;
}
.border:hover{
  transform: scale(1.0);
  box-shadow: 0 0 19.2px 0 rgba(6, 0, 1, 0.2000);
}

.blockImg {
  width: 148px;
  height: 148px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #1DD2AF;
  opacity: 0.76;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100px;
    height: 100px;
  }

}
  .lastItem {
    padding: 38px 96px 90px 96px;
    width: 1129px;
    height: 100%;
    margin: 96px 0;
    border: 1.92px solid #1DD2AF;
    text-align: center;
    letter-spacing: 3px;
  }
@media only screen and (max-width: 860px) {
  .lastItem {
    padding: 38px 30px;
    width: 1260px;
    margin: 96px 0;
    border: 1.92px solid #1DD2AF;
    text-align: center;
  }
}
</style>
